<template>
  <div class="main clearfix">
    <index-head></index-head>
    <div class="width-1920 newMain">
      <div class="left">
        <div class="newMainCondition">
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="指标" name="first">
              <div class="newTree">
                <el-tree class="filter-tree" :data="data" :props="defaultProps" :filter-node-method="filterNode"
                  ref="tree" show-checkbox node-key="label" :default-expanded-keys="[]"
                  :default-checked-keys="defaultCheckedKeysData" @check="nodeClickHandle"></el-tree>
              </div>
            </el-tab-pane>
            <el-tab-pane label="时间" name="three" class="timeCheck">
              <div class="newTree">
                <el-tree class="filter-tree" :data="dataTime" :props="defaultProps" :default-expand-all="true"
                  :filter-node-method="filterNode" ref="treeTime" show-checkbox node-key="label"
                  :default-checked-keys="defaultCheckedKeysTime" @check="nodeClickHandleTime"></el-tree>
              </div>
            </el-tab-pane>
            <el-tab-pane label="板块" name="baseInfo" class="timeCheck">
              <div class="newTree">
                <el-tree class="filter-tree" :data="dataHsplate" node-key="label" :props="defaultProps"
                  :default-expand-all="true" :filter-node-method="filterNode" ref="dataHsplate" show-checkbox
                  :default-checked-keys="defaultCheckedKeysHsp" @check="nodeClickHandleHsp"></el-tree>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="right">
        <ul class="newMainRightTabs changeBox">
          <div class="changeItem" @click="termlook">
            <p class="subtitle">查询条件</p>
          </div>
          <li @click="output">
            <span class="icon font_family icon-a-lujing736"></span>
            <span>导出</span>
          </li>
          <li @click="saveTableImg">
            <span class="icon font_family icon-a-lujing734"></span>
            <span>保存</span>
          </li>
        </ul>
        <div class="changeBox">
        </div>
        <div class="newMainContainer">

          <div class="mainPositionWin" v-show="mainPositionWinShow">

            <div class="newPredictTitle">
              <img src="../assets/image/newPredictTitleIcon.png" class="mar1" />
              <p class="mar2">查询条件</p>
              <img src="../assets/image/newPredictTitleIcon.png" class="mar3" />

              <div class="hoverBox hoverBox1" @click="termSubmit">
                <p class="icon font_family icon-a-lujing1573 mar4"></p>
                <p class="mar5">提取</p>
              </div>
              <div class="hoverBox" @click="conditionsClear">
                <p class="icon font_family icon-a-lujing1575 mar6"></p>
                <p class="mar7">清空</p>
              </div>
              <div class="hoverBox" @click="conditionsClose">
                <p class="icon font_family icon-a-zu110 mar8"></p>
                <p class="mar9">关闭</p>
              </div>
            </div>
            <div class="append">
              <p class="index">已选指标</p>
              <p class="time">已选时间</p>
              <p class="district">已选板块</p>
            </div>
            <div class="cont">
              <div class="indexBox">
                <div :class="indexDynamicWidth ? 'dynamicWidth indexDynamicWidth' : ''">
                  <el-checkbox-group v-model="getIndex" @change="handleCheckedGetIndexChange">
                    <el-checkbox v-show="filterGetIndex ? item.indexOf(filterGetIndex) >= 0 : true"
                      v-for="item in defaultCheckedKeysData" :label="item" :key="item">
                      {{ item }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <div class="timeBox">
                <div :class="timeDynamicWidth ? 'dynamicWidth' : ''">
                  <el-checkbox-group v-model="getTime" @change="handleCheckedGetTimeChange">
                    <el-checkbox v-for="item in defaultCheckedKeysTime" :label="item" :key="item">
                      {{ item }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <div class="districtBox">
                <div :class="regionDynamicWidth ? 'dynamicWidth' : ''">
                  <el-checkbox-group v-model="getHsp" @change="handleCheckedGetHspChange">
                    <el-checkbox v-for="item in defaultCheckedKeysHsp" :label="item" :key="item">{{ item }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
            <p class="icon font_family icon-a-lujing1579 scrollBtn"
              :class="(indexDynamicWidth && activeColor1) || (regionDynamicWidth && activeColor2) || (timeDynamicWidth && activeColor3) ? 'scrollBtnActive' : ''"
              @click="increaseWidth"></p>
          </div>

          <div class="newMainBody">
            <div class="newMainBody_tab_content">
              <div class="table-l" ref="tableWrapper" v-loading="loading">
                <el-table id="mytable" :data="tableData" style="width: 100%" height="760" ref="multipleTable">
                  <el-table-column label="序号" type="index" width="75" fixed></el-table-column>
                  <template v-for="item in tableColumn">
                    <el-table-column :key="item.key" :prop="item.prop" :label="item.label" :fixed="!!item.fixed"
                      :show-overflow-tooltip="true" :render-header="renderHeader" sortable align="center">
                    </el-table-column>
                  </template>
                </el-table>
              </div>
              <div class="flex-center">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                  :current-page="page" :page-sizes="[20, 40, 60, 80]" :page-size="limit"
                  layout="total, prev, pager, next, jumper" :total="total">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <comFoot></comFoot>
  </div>
</template>

<script>
import comFoot from '../components/comfoot'
import { mapGetters, mapMutations } from 'vuex'
import indexBreadcrumb from "../components/breadcrumb";
import indexHead from "../components/head";
import XLSX from "xlsx";
import _ from 'lodash';
import FileSaver from "file-saver";
import html2canvas from "html2canvas";
import esgListPLageConfig from "./components/macro/esgListPageConfig";
// import detailsDialog from "./detailsDialog";
import { getHideAreaArr, tabTable } from "./components/macro/table.js";
export default {
  name: "listed",
  components: {
    indexHead,
    indexBreadcrumb,
    comFoot
  },
  data() {
    return {
      loading: false,
      baseApi: "1",
      baseApis: esgListPLageConfig,
      tableData: [],
      page: 1,
      limit: 22,
      total: 0,
      baseCodes: "",
      mainPositionWinShow: false,
      activeName: "first",
      filterText: "",
      filterTextTime: "",
      filterTextHsplate: "",
      data: [],
      defaultCheckedKeysData: [],
      defaultCheckedKeysDataCodes: [],
      defaultCheckedKeysTime: [],
      // defaultCheckedKeysRegion: [],
      defaultCheckedKeysHsp: [],
      getIndex: [],
      sourceDataChecked: [], // 接口返回的默认选中的指标
      filterGetIndex: "",
      tableColumn: [  // 表头
        {
          prop: 'stockName',
          label: '股票名称',
          fixed: true,
          width: 100
        },
        {
          prop: 'stockCode',
          label: '股票代码',
          fixed: true,
        },
        {
          prop: 'timeCode',
          label: '报告期',
          fixed: true,
        },
        {
          prop: 'plate',
          label: '板块',
          fixed: true,
          width: 200
        }],
      // getTimes: [],
      // getRegions: [],
      // getIndexs: [],
      getTime: [],
      getRegion: [],
      getHsp: [],
      dataRegion: [],
      dataTime: [],
      dataHsplate: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      timeFilterSelectArr: [

        {
          value: 5,
          label: "近5年",
        },
        {
          value: 10,
          label: "近10年",
        },
        {
          value: 20,
          label: "近20年",
        },
      ],
      timeFilterSelectVal: "",
      sourceData: [],
      currentCode: "",
      indexDynamicWidth: false,
      regionDynamicWidth: false,
      timeDynamicWidth: false,
      activeColor1: true,
      activeColor2: true,
      activeColor3: true
    };
  },
  // CODES
  computed: {
    ...mapGetters({ userInfo: 'getUserInfo' }),
    breadcrumb() {
      return this.$route.query.breadcrumb;
    },
    headTag() {
      return this.$route.query.headTag;
    },
    tableName() {
      if (this.$route.query.tablename.indexOf("season") != -1)
        //前4/8/12季度
        this.timeFilterSelectArr = [

          {
            value: 4,
            label: "前4季度",
          },
          {
            value: 8,
            label: "前8季度",
          },
          {
            value: 12,
            label: "前12季度",
          },
        ];
      else if (this.$route.query.tablename.indexOf("month") != -1)
        //前4/8/12季度
        this.timeFilterSelectArr = [

          {
            value: 12,
            label: "前12月",
          },
          {
            value: 24,
            label: "前24月",
          },
          {
            value: 36,
            label: "前36月",
          },
        ];

      return this.$route.query.tablename || "area_province_year";
    },
    bodyInitData() {
      let item = this.baseApis.find((item) => {
        return item.key === this.baseApi;
      });
      return {
        url: `5700/websingletable/getEsgData`,
        method: "post",
        params: {
          page: this.page,
          limit: this.limit,
          // codes: item.key === "1" ? "" : this.baseCodes,
          codes: this.defaultCheckedKeysData.join(","),
          plates: this.defaultCheckedKeysHsp.join(","),
          times: this.defaultCheckedKeysTime.join(","),
        },
      };
    },

    bodyData() {
      let item = this.baseApis.find((item) => {
        return item.key === this.baseApi;
      });

      return {
        url: `5700/websingletable/findEsgData`,
        method: "post",
        params: {
          page: this.page,
          limit: this.limit,
          // codes: item.key === "1" ? "" : this.baseCodes,
          codes: this.defaultCheckedKeysData.join(","),
          plates: this.defaultCheckedKeysHsp.join(","),
          times: this.defaultCheckedKeysTime.join(","),
        },
      };
    }
  },
  watch: {
    baseApis(v) {
      console.log(v)
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    filterTextTime(val) {
      this.$refs.treeTime.filter(val);
    },
    filterTextHsplate(val) {
      this.$refs.dataHsplate.filter(val);
    },
    defaultCheckedKeysData(val) {

      this.getIndex = val;
      Array.prototype.indexOf = function (val) {
        for (var i = 0; i < this.length; i++) {
          if (this[i] == val) return i;
        }
        return -1;
      };
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      var emp = this.getIndex;
      emp.remove("全选");
    },
    // defaultCheckedKeysRegion(val) {
    //   this.getRegion = val;
    //   Array.prototype.indexOf = function (val) {
    //     for (var i = 0; i < this.length; i++) {
    //       if (this[i] == val) return i;
    //     }
    //     return -1;
    //   };
    //   Array.prototype.remove = function (val) {
    //     var index = this.indexOf(val);
    //     if (index > -1) {
    //       this.splice(index, 1);
    //     }
    //   };
    //   var emp = this.getRegion;
    //   emp.remove("全选");
    // },
    defaultCheckedKeysTime(val) {
      this.getTime = val;
      Array.prototype.indexOf = function (val) {
        for (var i = 0; i < this.length; i++) {
          if (this[i] == val) return i;
        }
        return -1;
      };
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      var emp = this.getTime;
      emp.remove("全选");
    },
    defaultCheckedKeysHsp(val) {
      this.getHsp = val;
      Array.prototype.indexOf = function (val) {
        for (var i = 0; i < this.length; i++) {
          if (this[i] == val) return i;
        }
        return -1;
      };
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      var emp = this.getHsp;
      emp.remove("全选");
    },
  },
  methods: {
    ...mapMutations(['setBreadcrumb', 'setHeadTag']),
    increaseWidth() {
      if (this.indexDynamicWidth && $(".indexBox").width() < $(".indexDynamicWidth").width()) {
        $(".mainPositionWin").css("width", $(".mainPositionWin").width() + ($(".indexDynamicWidth").width() - $(".indexBox").width()));
        $(".indexBox,.index").css("width", $(".indexDynamicWidth").width());
        this.activeColor1 = false;
      }
      if (this.regionDynamicWidth && $(".districtBox").width() <= 270) {
        $(".mainPositionWin").css("width", $(".mainPositionWin").width() + 140);
        $(".districtBox,.district").css("width", $(".districtBox").width() + 140);
        this.activeColor2 = false;
      }
      if (this.timeDynamicWidth && $(".timeBox").width() <= 270) {
        $(".mainPositionWin").css("width", $(".mainPositionWin").width() + 140);
        $(".timeBox,.time").css("width", $(".timeBox").width() + 140);
        this.activeColor3 = false;
      }
    },
    renderHeader(h, { column, $index }) {
      // 新建一个 span
      let span = document.createElement('span');
      // 设置表头名称
      span.innerText = column.label;
      // 临时插入 document
      document.body.appendChild(span);
      // 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
      column.minWidth = span.getBoundingClientRect().width + 60;
      // 移除 document 中临时的 span
      document.body.removeChild(span);
      return h('span', column.label);
    },
    // showDialog(item) {
    //   //在基本信息的时候才触发新的接口提交，
    //   if (this.baseApi == "1") {
    //     ///5600/hscominfo/findByCode/{code}
    //     this.currentCode = "";
    //     this.$axios
    //       .request({
    //         url: `5600/hscominfo/findByCode/${item.code}`,
    //         method: "get",
    //       })
    //       .then(({ data }) => {
    //         let arr = [];
    //         arr.push(data.info);
    //         this.$refs.detailsDialog.settableColumnandtableData(
    //           this.tableColumn,
    //           arr,
    //           this.defaultCheckedKeysTime,
    //           this.settableColumnandtableData,
    //           this.defaultCheckedKeysHsp,
    //           item.code,
    //           this.baseApi
    //         );
    //       });
    //   } else {
    //     this.currentCode = item.code;
    //     let body = this.bodyData;

    //     body.params.CODES = this.currentCode;

    //     this.$axios.request(body).then(({ data }) => {
    //       this.$refs.detailsDialog.settableColumnandtableData(
    //         this.tableColumn,
    //         data.data,
    //         this.defaultCheckedKeysTime,
    //         this.settableColumnandtableData,
    //         this.defaultCheckedKeysHsp,
    //         item.code,
    //         this.baseApi
    //       );
    //     });
    //   }
    // },


    timeFilterSelectFn(val) {
      //  筛选年份

      this.timeFilterSelectVal = val.label;

      this.$refs.treeTime.setCheckedKeys(this.timeSource.slice(0, val.value));
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label ? data.label.indexOf(value) !== -1 : false;
    },
    nodeClickHandle(data, { checkedKeys, checkedNodes }) {
      let tableColumn1 = [  // 表头
        {
          prop: 'stockName',
          label: '股票名称',
          fixed: true,
          width: 100
        },
        {
          prop: 'stockCode',
          label: '股票代码',
          fixed: true,
        },
        {
          prop: 'timeCode',
          label: '报告期',
          fixed: true,
        },
        {
          prop: 'plate',
          label: '板块',
          fixed: true,
          width: 200
        }];
      checkedNodes.forEach(function (item, index) {
        tableColumn1.push({
          label: item.fullname,
          prop: item.code.replace("ESG", 'esg'),
        });
      })
      console.log(tableColumn1)
      this.tableColumn = tableColumn1
      console.log(checkedKeys)
      if (checkedKeys.length > 22) {
        //截取前22个
        checkedKeys = checkedKeys.slice(0, 22);
        // this.getIndexs = getIndexs;
        this.$message.closeAll()
        this.$message.error('最多选择22个指标');
      }
      this.defaultCheckedKeysData = checkedKeys;
      this.mainPositionWinShow = true;

      let maxLabelLength = 0;
      checkedKeys.forEach(item => {
        console.log(item.length)
        if (item.length > maxLabelLength) {
          maxLabelLength = item.length;
        }
      });
      if (maxLabelLength > 32) {
        this.indexDynamicWidth = true;
        $(".indexDynamicWidth").css("width", maxLabelLength * 15 + "px");
      }
    },
    nodeClickHandleHsp(data, { checkedKeys, checkedNodes }) {
      if (checkedKeys.length > 36) {
        checkedKeys = checkedKeys.slice(0, 36);
        this.$message.closeAll()
        this.$message.error('最多选择36个指标');
      }
      this.defaultCheckedKeysHsp = checkedKeys;
      this.mainPositionWinShow = true;
      if (checkedKeys.length > 24) {
        this.timeDynamicWidth = true
      }
    },
    nodeClickHandleTime(data, { checkedKeys, checkedNodes }) {

      if (checkedKeys.length > 36) {
        checkedKeys = checkedKeys.slice(0, 36);
        this.$message.closeAll()
        this.$message.error('最多选择36个指标');
      }
      this.defaultCheckedKeysTime = checkedKeys;
      this.mainPositionWinShow = true;
      if (checkedKeys.length > 24) {
        this.timeDynamicWidth = true
      }
    },

    handleCheckedGetIndexChange() {
      var that = this;
      let tableColumn1 = [  // 表头
        {
          prop: 'stockName',
          label: '股票名称',
          fixed: true,
          width: 100
        },
        {
          prop: 'stockCode',
          label: '股票代码',
          fixed: true,
        },
        {
          prop: 'timeCode',
          label: '报告期',
          fixed: true,
        },
        {
          prop: 'plate',
          label: '板块',
          fixed: true,
          width: 200
        }];
      this.defaultCheckedKeysData = this.getIndex;
      this.getIndex.forEach(function (prop, index) {
        var _index = that.tableColumn.findIndex(item => item.label === prop);
        if (_index > 0) {
          tableColumn1.push(that.tableColumn[_index]);
        }
      })
      this.tableColumn = tableColumn1;
      this.$refs.tree.setCheckedKeys(this.getIndex);
    },
    handleCheckedGetTimeChange() {
      this.defaultCheckedKeysTime = this.getTime;
      this.$refs.treeTime.setCheckedKeys(this.getTime);
    },
    handleCheckedGetHspChange() {
      this.defaultCheckedKeysHsp = this.getHsp;
      this.$refs.dataHsplate.setCheckedKeys(this.getRegion);
    },
    termSubmit() {
      // 提取数据
      this.getList().then(() => {
        this.mainPositionWinShow = false;
      });
    },
    conditionsClear() {
      this.defaultCheckedKeysData = [];
      this.defaultCheckedKeysTime = [];
      this.defaultCheckedKeysHsp = [];
      this.$refs.tree.setCheckedKeys([]);
      this.$refs.treeTime.setCheckedKeys([]);
      this.$refs.dataHsplate.setCheckedKeys([]);
    },
    conditionsClose() {
      this.mainPositionWinShow = false;
      if (!this.getIndex.length) {
        this.getIndex = this.sourceDataChecked;
        this.handleCheckedGetIndexChange();
      }
    },
    filterTextClear() {
      this.filterText = "";
    },
    // filterTextHsplate() {
    //   this.filterTextHsplate = "";
    // },
    filterTextTimeClear() {
      this.filterTextTime = "";
    },
    termlook() {
      window.scrollTo(0, 0);
      this.mainPositionWinShow = true;
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    async getList() {
      var that = this;

      if (that.breadcrumb != undefined) {
        this.setBreadcrumb(that.breadcrumb.split(","))
      }
      if (that.headTag != undefined) {
        this.setHeadTag(that.headTag.split(","))
      }
      let res = await this.$axios.request(this.bodyData);
      if (String(res.data.code) === "1") {
        // 失败
        this.$message.error(res.data.resp_msg);
        return;
      }
      let datas = Object.assign([], _.get(res, "data.data", []));
      this.sourceData = _.cloneDeep(datas);
      this.tableData = Object.assign([], datas);
      console.log(this.tableData)
      this.total = _.get(res, "data.count", 0);
      this.$nextTick(() => {
        if (this.$refs.multipleTable && this.$refs.multipleTable.doLayout) {
          this.$refs.multipleTable.doLayout();
        }
      })
      if (this.baseApi === "1") {
        this.baseCodes = datas
          .map((item) => {
            return item.code;
          })
          .join(",");
      }
    },
    async getInfoList() {
      let res = await this.$axios.request(this.bodyInitData);
      if (String(res.data.code) === "1") {
        // 失败
        this.$message.error(res.data.resp_msg);
        return;
      }
      let datas = Object.assign([], _.get(res, "data.data", []));
      this.sourceData = _.cloneDeep(datas);
      this.tableData = Object.assign([], datas);
      this.total = _.get(res, "data.count", 0);
      this.$nextTick(() => {
        if (this.$refs.multipleTable && this.$refs.multipleTable.doLayout) {
          this.$refs.multipleTable.doLayout();
        }
      })
      if (this.baseApi === "1") {
        this.baseCodes = datas
          .map((item) => {
            return item.code;
          })
          .join(",");
      }
    },
    saveTableImg() {
      let isexport = this.userInfo.exporttype
      if (!isexport) {
        this.$message({
          message: '试用账号，无此权限！请联系管理员！',
          type: 'warning',
          showClose: true,
          duration: 3000,
          center: true
        });
        return
      }
      html2canvas(this.$refs.tableWrapper).then((canvas) => {
        let dataURL = canvas.toDataURL("image/png");
        let link = document.createElement("a");
        link.href = canvas.toDataURL(); //下载链接
        link.setAttribute("download", $(".excelName").html());
        link.style.display = "none"; //a标签隐藏
        document.body.appendChild(link);
        link.click();
      });
    },
    output() {
      let { exporttype, username, exportRestrictions } = this.userInfo
      if (!exporttype) {
        this.$message({
          message: '试用账号，无此权限！请联系管理员！',
          type: 'warning',
          showClose: true,
          duration: 3000,
          center: true
        });
        return
      }
      if (exportRestrictions) {
        // 查看权限下的导出条数
        this.$axios.request({
          url: "5100/user/exportRestrictions",
          method: "get",
          params: {
            exportNumber: 0,
            userName: username
          },
        }).then(res => {
          let Rpieces = res.data
          if (Rpieces == 0) {
            this.$message({
              message: '试用账号，导出已达上限！',
              type: 'warning',
              showClose: true,
              duration: 3000,
              center: true
            });
            return
          } else {
            // 拷贝原有数据
            let original = JSON.parse(JSON.stringify(this.tableData));
            if (this.tableData.length > Rpieces) {
              let extract = this.tableData.slice(0, Rpieces);
              let Controlcol = this.ReservedBar(extract)
              this.tableData = Controlcol
              this.$nextTick(() => {
                this.QuickPass()
                this.Exportsuccess(Rpieces, username)
              })
            } else {
              let Controlcol = this.ReservedBar(this.tableData)
              this.tableData = Controlcol
              this.$nextTick(() => {
                this.QuickPass()
                this.Exportsuccess(this.tableData.length, username)
              })
            }
            // 还原原有数据
            setTimeout(() => {
              this.tableData = original
            })
          }
        })
      } else {
        this.QuickPass()
      }
    },

    // 横向保留20条
    ReservedBar(arr) {
      let newArr = arr.map(obj => {
        let newObj = {}
        let count = 0
        for (let key in obj) {
          if (count < 22) {
            newObj[key] = obj[key];
            count++;
          }
        }
        return newObj
      })
      return newArr
    },

    // 快速导出
    QuickPass() {
      var excelName = $(".excelName").html();
      var addFooterHtml =
        '<tr class="tableNone"></tr><tr class="tableNone"></tr><tr class="tableNone"></tr><tr class="tableNone"></tr><tr class="tableNone"></tr><tr class="tableNone"><td></td><td>数据来源：数据圈</td></tr><tr class="tableNone"><td></td><td>联系人：刘老师</td></tr><tr class="tableNone"><td></td><td>电&nbsp;&nbsp;话：18810308405</td></tr><tr class="tableNone"><td></td><td>E-mail：shicong.liu@shujuquan.com</td></tr>';
      $("#mytable")
        .find(".el-table__fixed-body-wrapper")
        .find("tbody")
        .append(addFooterHtml);
      var fix = document.querySelector(".el-table__fixed");
      var wb;
      if (fix) {
        wb = XLSX.utils.table_to_book(
          document.querySelector("#mytable").removeChild(fix)
        );
        document.querySelector("#mytable").appendChild(fix);
        $(".tableNone").remove();
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#mytable"));
      }
      /* get binary string as output */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      let date = new Date();
      date = `${date.getFullYear()}${date.getMonth() + 1}${date.getDate()}`;
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          `` + excelName + `${date}.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

    // 导出成功
    Exportsuccess(value, user) {
      this.$axios.request({
        url: "/5100/user/exportRestrictions",
        method: "get",
        params: {
          exportNumber: value,
          userName: user
        },
      }).then(res => {
        return res.data
      })
    },

    async firstInit() {
      var that = this;
      let result = tabTable.find((item) => {
        return item.tableName.indexOf(this.tableName) >= 0;
      });
      var params = new URLSearchParams();
      params.append("tableName", that.tableName);
      let data1 = new Promise((resolve, reject) => {
        this.$axios
          .request({
            url: "5700/websingletable/getIndex",
            method: "get",
            params: params,
          })
          .then(function (response) {
            // var data = that.getNavData(response.data);
            let defaultCheckedKeysData = [];
            let defaultCheckedKeysDataCodes = [];
            response.data.forEach((item) => {
              if (item.isShow) {
                defaultCheckedKeysData.push(item.name);
                defaultCheckedKeysDataCodes.push(item.code);
              }
            });
            that.defaultCheckedKeysData = defaultCheckedKeysData;
            that.defaultCheckedKeysDataCodes = defaultCheckedKeysDataCodes;
            that.sourceDataChecked = _.cloneDeep(defaultCheckedKeysData);
            that.baseApis[0].thead.forEach(function (item, index) {
              console.log(item.prop.toUpperCase())
              if (defaultCheckedKeysDataCodes.includes(item.prop.toUpperCase())) {
                that.tableColumn.push(item)
              }
            });
            // tableColumn() {
            //   return this.baseApis.find((item) => {
            //     return item.key === this.baseApi;
            //   }).thead;
            // },
            var data = that.getNavData(_.cloneDeep(response.data));
            that.data = data
            resolve(response);
          })
          .catch(function (error) {
            reject(error);
            console.log(error);
          });
      });
      let dataTime1 = new Promise((resolve, reject) => {
        this.$axios
          .request({
            url: "5700/websingletable/getTime",
            method: "get",
            params: params,
          })
          .then(function (res) {
            resolve(res);
            // 原始数据
            res.data.sort(function (a, b) {
              return b - a;
            });
            that.timeSource = res.data;
            if (res.data) {
              that.setTimeTrees(res, result);
            }
            that.defaultCheckedKeysTime = res.data;
          })
          .catch(function (error) {
            reject(error);
            console.log(error);
          });
      });
      //
      let dataPlate1 = new Promise((resolve, reject) => {
        this.$axios
          .request({
            url: "5700/websingletable/getPlate",
            method: "get",
            params: params,
          })
          .then(function (res) {
            console.log(res)
            // that.setRegionTrees(res, result);
            if (res) {
              let gethsplateArr = [];
              for (let e of res.data.datas) {
                gethsplateArr.push({
                  id: e,
                  label: e,
                });
              }
              that.dataHsplate = [
                {
                  id: "all",
                  label: "全选",
                  children: gethsplateArr,
                },
              ];
              that.defaultCheckedKeysHsp = res.data.datas
            }
            resolve(res);
          })
          .catch(function (error) {
            reject(error);
            console.log(error);
          });
      });

      data1
        .then(() => {
          return dataTime1;
        })
        .then(() => {
          return dataPlate1;
        })
        .then(() => {
          let pageType = this.$route.query.pageType;
          if (pageType === "changeParam") {
            // 自带默认查询数据,从收藏列表页面过来
            let { indexCode, regionCode, timeCode } = JSON.parse(
              localStorage.getItem("macroCodes")
            );
            // index_code: this.getIndex.join(','),  // 隐藏指标代码，隐藏提交
            //   region_code: this.getRegion.join(','), // 隐藏地区代码，隐藏提交
            //   time_code: this.getTime.join(','),  // 隐藏时间代码，隐藏提交
            //  that.termlook();
            let { getIndex, getPlate, getTime } = this.viewConditions();
            this.checkChangeHandle(null, null, null, indexCode.split(","));
            this.checkChangeHandleRegion(
              null,
              null,
              null,
              regionCode.split(",")
            );
            this.checkChangeHandleTime(null, null, null, timeCode.split(","));
            // todo  从缓存中拿数据
            return this.termSubmit();
          }
          return that.websingletableGetData();
        })
        .finally(() => {
          that.mainPositionWinShow = false;
        });
      this.getList();
    },
    websingletableGetData() {
      // 默认 查看条件
      // var that = this;
      // var params = new URLSearchParams();
      // params.append("tableName", that.tableName);
      // return new Promise((resolve, reject) => {
      //   this.$axios
      //     .request({
      //       url: "5700/websingletable/getEsgData",
      //       method: "post",
      //       params: params,
      //     })
      //     .then(function (res) {
      //       that.sourceData = res.data;
      //       that.defaultData = res.data; // 默认数值
      //       // that.init();
      //       // that.termlook();
      //       resolve(res);
      //     })
      //     .catch(function (error) {
      //       reject(error);
      //     });
      // });
    },
    // 设置 点击查看条件按钮 设置 数组
    viewConditions() {
      // let {defaultData} = this;
      let { sourceData } = this;
      let getIndex = [];
      let getRegion = [];
      let getTime = [];
      for (let key in sourceData) {
        getIndex.push(key.split("|")[0]);
        let item1 = sourceData[key];
        for (let key1 in item1) {
          let region = key1.split("|")[0];
          if (getRegion.indexOf(region) < 0) {
            getRegion.push(region);
          }
          let item2 = item1[key1];
          for (let key2 in item2) {
            if (getTime.indexOf(key2) < 0) {
              getTime.push(key2);
            }
          }
        }
      }
      return {
        getIndex,
        getRegion,
        getTime,
      };
    },
    setTimeTrees(res, result) {
      if (!result || result.time === "1") {
        let timeArr = [];
        for (let e of res.data) {
          timeArr.push({
            id: e,
            label: e,
          });
        }
        this.dataTime = [
          {
            id: 3,
            label: "全选",
            children: timeArr,
          },
        ];
      } else if (result.time === "2") {
        let map = new Map();
        let timeArr = [];
        for (let e of res.data) {
          let year = e.substring(0, 4);
          let value = map.get(year) || [];
          value.push({
            id: e,
            label: e,
          });
          map.set(year, value);
        }
        for (let e of map) {
          let key = e[0];
          let value = e[1];
          timeArr.push({
            id: "id_" + key,
            label: key,
            children: value,
          });
        }

        this.dataTime = [
          {
            id: 3,
            label: "全选",
            children: timeArr,
          },
        ];
      }
    },
    getNavData(list, parentId) {
      if (!parentId) {
        parentId = 0;
      }
      let result = [];
      for (var i = 0; i < list.length; i++) {
        if (list[i].parenid == parentId) {
          list[i].label = list[i].name;
          list[i].children = this.getNavData(list, list[i].id);
          result.push(list[i]);
        }
      }
      return result;
    },
  },
  mounted() {
    this.firstInit();
  },
};
</script>

<style scoped lang="less">
.container {
  background: #000;
}

.newMain {
  display: flex;
  width: 1536px;
  margin: 0 auto 12px;
  padding: 0 16px;
  background: #15161C;
  justify-content: space-between;
  box-sizing: border-box;

  .left {
    width: 384px;

    :deep(.newMainCondition) {

      ::-webkit-scrollbar {
        width: 16px;
        height: 16px;
        display: block;
      }

      ::-webkit-scrollbar-thumb {
        border-radius: 0;
        background: #948482;
      }

      .el-tabs__header {
        margin-bottom: 9px;

        .el-tabs__nav {
          display: flex;
          justify-content: center;
        }

        .el-tabs__item {
          width: 124px;
          height: 45px;
          line-height: 45px;
          padding: 0;
          background: #25262D;
          border-radius: 0 0 16px 16px;
          color: #948482;
          font-size: 16px;
          margin-right: 6px;
        }

        .el-tabs__item:last-child {
          margin-right: 0;
        }

        .el-tabs__item.is-active {
          color: #D82B2C;
        }
      }

      .el-tabs__content {
        .newMainConditionSearch {
          display: flex;
          width: 100%;
          background: #494A52;
          border-radius: 4px;

          .el-input {
            flex: 1;
            margin: 0;

            .el-input__inner {
              border: none;
              height: 32px;
              border-radius: 0;
              color: #948482;
              font-size: 15px;
            }

            .el-input__inner::-webkit-input-placeholder {
              color: #948482;
            }
          }

          .newSearchIcon {
            width: 32px;
            height: 32px;
          }
        }

        .newTree {
          max-height: 843px;
          margin-top: 10px;
          overflow: auto;
          background: #25262D;
          margin-bottom: 16px;

          .el-tree {
            background: none;
            padding: 12px 24px 12px 0;
            box-sizing: border-box;

            .el-checkbox__inner {
              width: 13px;
              height: 13px;
              background: #948482;
              border: none;
            }

            .el-checkbox__input.is-checked .el-checkbox__inner,
            .el-checkbox__input.is-indeterminate .el-checkbox__inner {
              background: #D82B2C;
            }

            .el-checkbox__inner::after {
              display: none;
            }

            .el-tree-node__content {
              align-items: flex-start;

              .el-checkbox {
                margin-top: 2px;
              }
            }

            .el-tree-node__label {
              color: #948482;
              font-size: 15px;
              white-space: normal;
              text-align: left;
            }

            .is-checked .el-tree-node__label {
              color: #D82B2C;
            }
          }
        }
      }
    }

    :deep(.newMainConditionArea) {
      .el-tabs__header .el-tabs__item {
        width: 190px;
      }
    }
  }

  .right {
    width: 1104px;
    overflow: hidden;

    .newMainRightTabs {
      box-sizing: border-box;
      padding-left: 23px;
      padding-right: 23px;
      height: 45px;
      background: #25262D;
      display: flex;
      align-items: center;
      // justify-content: flex-end;
      color: #948482;
      font-size: 16px;
      border-radius: 0 0 16px 16px;

      .active {
        border-radius: 0;
        background: none;
        color: #D82B2C;
      }

      .icon {
        font-size: 18px;
        margin-right: 8px;
      }

      li {
        display: flex;
        align-items: center;
        margin-left: 60px;

        .oblique {
          font-size: 24px;
          margin: 0 8px;
        }
      }

      li:hover {
        color: #D82B2C;
        cursor: pointer;
      }
    }

    :deep(.changeBox) {
      display: flex;
      margin-bottom: 9px;

      .changeItem {
        width: 160px;
        background: url(../assets/image/newSelectBg.png) no-repeat right center #494A52;
        height: 32px;
        border-radius: 4px;
        margin-right: 8px;

        .subtitle {
          color: #948482;
          font-size: 15px;
          text-align: left;
          padding-left: 7px;
          line-height: 32px;
          cursor: pointer;
        }

        .el-select {
          width: 100%;

          .el-input__inner {
            background: none;
            height: 32px;
            border-radius: none;
            color: #948482;
            font-size: 15px;
            padding-left: 7px;
          }

          .el-select__caret {
            display: none;
          }
        }
      }

      .chartsType {
        flex: 1;
        display: flex;
        justify-content: space-between;

        .chartsTypeItem {
          width: 83px;
          height: 42px;
          background: #25262D;
          border-radius: 4px 4px 0 0;
          font-size: 15px;
          color: #948482;
          line-height: 42px;
          cursor: pointer;
        }

        .on {
          color: #D82B2C;
        }
      }

      .long {
        width: 416px;
        margin-right: 10px;
      }
    }

    .newMainContainer {
      position: relative;

      .mainPositionWin {
        position: absolute;
        left: 0;
        top: 0;
        width: auto;
        height: auto;
        padding: 0;
        background: #494A52;
        box-sizing: border-box;
        box-shadow: none;
        padding-bottom: 10px;

        .newPredictTitle {
          height: 50px;
          background: #25262D;
          // border-radius: 0 0 16px 16px;
          display: flex;
          align-items: center;
          font-size: 16px;
          color: #948482;

          .mar1 {
            margin-left: 22px;
            margin-right: 12px;
            width: 18px;
          }

          .mar3 {
            margin-left: 12px;
            width: 18px;
          }

          .mar4 {
            margin-left: auto;
            margin-right: 6px
          }

          .mar5 {
            margin-right: 43px;
          }

          .mar6 {
            margin-right: 4px;
          }

          .mar7 {
            margin-right: 35px;
          }

          .mar9 {
            margin-right: 29px;
            margin-left: 5px;
          }

          .hoverBox {
            display: flex;
            align-items: center;

            .icon {
              font-size: 18px;
            }
          }

          .hoverBox:hover {
            color: #D82B2C;
          }

          .hoverBox1 {
            margin-left: auto;
          }

          .mar4,
          .mar5,
          .mar6,
          .mar7,
          .mar8,
          .mar9 {
            cursor: pointer;
          }
        }

        .append {
          height: 26px;
          background: #948482;
          border-radius: 0 0 16px 16px;
          color: #494A52;
          font-size: 13px;
          display: flex;
          align-items: center;

          .index {
            width: 472px;
            text-align: center;
          }

          .district,
          .time {
            padding-left: 14px;
            width: 140px;
          }
        }

        :deep(.cont) {
          // max-height: 550px;
          margin-top: 15px;
          margin-bottom: 6px;
          display: flex;
          overflow: auto;

          ::-webkit-scrollbar {
            width: 0;
            height: 0;
          }

          .indexBox {
            width: 472px;
            box-sizing: border-box;
            text-align: center;
            overflow: auto;

            .el-checkbox {
              width: 100%;
              text-align: left;
              margin-right: 0;
            }
          }

          .districtBox,
          .timeBox {
            // padding-left: 14px;
            box-sizing: border-box;
            overflow: auto;
            width: 140px;
            border-left: 2px solid #948482;
            text-align: left;

            .checkbox-group {
              label {
                width: 100%;
              }
            }

            .dynamicWidth {
              width: 280px;

              .el-checkbox {
                width: 50%;
                text-align: left;
                margin-right: 0;
              }
            }
          }

          .el-checkbox {
            margin-bottom: 8px;
            margin-right: 0;
            width: 100%;
            padding-left: 22px;
            box-sizing: border-box;

            .el-checkbox__label {
              color: #948482;
              font-size: 15px;
              line-height: 1;
            }

            .el-checkbox__inner {
              width: 13px;
              height: 13px;
              background: #948482;
              border: none;
            }

            .el-checkbox__input.is-checked .el-checkbox__inner::after {
              display: none;
            }

            .el-checkbox__input.is-checked .el-checkbox__inner,
            .el-checkbox__input.is-indeterminate .el-checkbox__inner {
              background: #D82B2C;
            }
          }
        }

        .scrollBtn {
          float: right;
          margin-right: 13px;
          cursor: pointer;
          font-size: 25px;
          color: #fff;
        }

        .scrollBtnActive {
          color: #D82B2C;
        }
      }

      .predictWinBox {
        background: none;
        position: absolute;
        left: 0;
        top: 0;

        .predictWin {
          position: absolute;
          left: 106px;
          top: 0;
          width: 512px;
          padding: 0;
          background: #000;
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);

          .newPredictTopBorder {
            height: 6px;
            background: #D82B2C;
          }

          .newPredictTitle {
            height: 50px;
            background: #25262D;
            border-radius: 0 0 16px 16px;
            display: flex;
            align-items: center;
            font-size: 16px;
            color: #948482;

            .mar1 {
              margin-left: 32px;
              margin-right: 14px;
              width: 18px;
            }

            .mar3 {
              margin-left: 14px;
              width: 18px;
            }

            .mar4 {
              margin-left: auto;
              margin-right: 6px
            }

            .mar6 {
              margin-left: 30px;
            }

            .hoverBox {
              display: flex;
              align-items: center;

              .icon {
                font-size: 18px;
              }
            }

            .hoverBox:hover {
              color: #D82B2C;
            }

            .hoverBox1 {
              margin-left: auto;
            }

            .mar7 {
              margin-right: 19px;
              margin-left: 5px;
            }

            .mar4,
            .mar5,
            .mar6,
            .mar7 {
              cursor: pointer;
            }
          }

          :deep(.cont) {

            padding: 22px 0 20px 0;

            ul {
              width: 90%;
              margin: 0 auto;

              li {
                display: flex;
                padding: 0 10px;
                color: #948482;
                text-align: left;
                border: 1px solid #948482;
                font-size: 14px;

                .label {
                  width: 30%;
                  border-right: 1px solid #948482;
                  padding: 5px 0;
                }

                .value {
                  flex: 1;
                  padding: 5px 0 5px 10px;
                }
              }
            }

            .el-checkbox-group {
              text-align: left;
              margin-left: 60px;

              .el-checkbox {
                line-height: 30px;
              }

              .el-checkbox__inner {
                width: 13px;
                height: 13px;
                background: #948482;
                border: none;
              }

              .el-checkbox__input.is-checked .el-checkbox__inner,
              .el-checkbox__input.is-indeterminate .el-checkbox__inner {
                background: #D82B2C;
              }

              .el-checkbox__inner::after {
                display: none;
              }

              .el-checkbox__label {
                color: #948482;
                font-size: 15px;
              }
            }

            .el-select {
              width: 448px;
              margin: 0 auto;

              .el-input__inner {
                background: url(../assets/image/newSelectBg.png) no-repeat right center #494A52;
                height: 32px;
                border-radius: 4px;
              }

              .el-input__suffix {
                display: none;
              }
            }
          }
        }
      }

      .newMainBody {
        .newMainBody_tab_content {


          ::-webkit-scrollbar {
            width: 16px;
            height: 16px;
            display: block;
          }

          ::-webkit-scrollbar-thumb {
            border-radius: 0;
            background: #948482;
          }

          :deep(.table-l) {
            margin-top: 5px;
            overflow-y: auto;



            .el-table__fixed .el-table__fixed-body-wrapper .el-table__body {
              padding-bottom: 10px !important;
            }

            .el-table__body-wrapper {
              overflow-x: auto;
            }

            ::-webkit-scrollbar {
              width: 16px;
              height: 16px;
              display: block;
            }

            ::-webkit-scrollbar-thumb {
              border-radius: 0;
              background: #948482;
            }

            .el-table__header {
              tr th:nth-child(1) .cell {
                font-size: 15px;
              }

              .el-table__cell {
                height: 38px;
                padding: 0;
                border-right: 3px solid #15161C;
                border-bottom: 4px solid #15161C;

                .cell {
                  padding: 0;
                  color: #fff;
                  font-size: 14px;
                }
              }
            }

            .el-table__body {
              .el-table__row {
                background: #494A52;

                .el-table__cell {
                  height: 32px;
                  padding: 0;
                  border-right: 3px solid #15161C;
                  border-bottom: 4px solid #15161C;

                  .cell {
                    padding: 0 4px;
                    color: #289EC9;
                    font-size: 14px;
                    text-align: left
                  }
                }

                .el-table__cell:nth-child(1) {
                  .cell {
                    font-size: 15px;
                    text-align: left;
                    padding: 0 8px;
                  }
                }
              }

              .el-table__row:last-child {
                .el-table__cell {
                  border-bottom: none;
                }
              }

              .el-table__row:nth-child(2n) {
                background: #25262D;
              }
            }

            .el-checkbox:last-of-type {
              margin: 0;
            }

            .el-checkbox__inner {
              width: 13px;
              height: 13px;
              background: #948482;
              border: none;
            }

            .el-checkbox__input.is-checked .el-checkbox__inner,
            .el-checkbox__input.is-indeterminate .el-checkbox__inner {
              width: 13px;
              height: 13px;
              background: #D82B2C;
              border: none;
            }

            .el-checkbox__inner::after {
              display: none;
            }
          }

          :deep(.flex-center) {
            padding: 20px 0;

            .el-pager li.btn-quicknext,
            .el-pager li.btn-quickprev,
            .el-pagination__total,
            .el-input__inner,
            .el-pagination__jump {
              color: #948482;
              font-size: 14px;
            }

            .el-pager li {
              border-color: #948482;
              color: #948482;
            }

            .el-pager li.active {
              background: #D82B2C !important;
              color: #fff;
            }

            .el-pagination .btn-next .el-icon,
            .el-pagination .btn-prev .el-icon {
              color: #948482;
            }
          }
        }
      }
    }
  }
}

.mainBody {
  color: #fff;
  background-color: #25262e;
}

/deep/ .table-l {
  position: relative;
}

/deep/ .el-table__body-wrapper {
  border-top: 0 !important;
}

/deep/ .el-table__fixed-body-wrapper tbody tr td:nth-child(3) {
}

/deep/ .el-table__body tbody tr td div {
  border-bottom: 1px solid transparent;
}

/deep/ .el-table__fixed-body-wrapper tbody tr td:nth-child(3) div {
  width: 70px !important;
  margin: 0 auto;
  box-sizing: border-box;
}

/deep/ .el-table__fixed-right::before,
.el-table__fixed::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #1f2027;
  z-index: 4;
}

.el-table__empty-text {
  text-align: left;
  width: 100%;
  margin-left: 8%;
}

/deep/ .el-table__empty-block {
  justify-content: left;
}

/deep/ .el-table__empty-text {
  padding-left: 400px;
}
</style>
